<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/page-bg1.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' leftIconColor="#fff" bgColor="transparent" @leftClick="navBack" title="危机评估">
				<view slot="center" class="navTitle" style="color: #fff;">
					<text v-if="info&&info.userName">{{info.userName}}-</text> 危机评估
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">

					<view class="wbox" v-if="info">
						<view class="bg">
							<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/boxbg3-1.png"
								mode="widthFix"></image>
						</view>

						<view class="map" :class="info.score?'':'nomap'">
							<view class="cvscontainer" v-if="info.score">
								<view class="cvs">
									<view class="line2 line">
										<view class="dot1"></view>
										<view class="dot2"></view>
										<view class="i1">
											<view class="cr"
												:style="'transform:rotate('+(-(136-136*info.score/info.referenceScore))+'deg)'">
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="hd">
								<view class="score">
									<text class="num">{{info.score}}</text><text>分</text>
								</view>
								<view class="name">
									评估得分
								</view>
								<view class="p" v-html="info.content"></view>
								<view class="tag"
									:style="'color:'+stageOption(info.stage).color+';background:'+stageOption(info.stage).bgColor">
									{{stageOption(info.stage).label}}
								</view>
							</view>
						</view>
						<view class="tit border">
							个人信息
						</view>
						<view class="lines">
							<view class="line">
								<view class="ll">姓名</view>
								<view class="lr">{{info.userName}}</view>
							</view>
							<view class="line">
								<view class="ll">性别</view>
								<view class="lr">{{info.sex}}</view>
							</view>
							<view class="line">
								<view class="ll">年级</view>
								<view class="lr">{{info.gradeName}}</view>
							</view>
							<view class="line">
								<view class="ll">班级</view>
								<view class="lr">{{info.classesName}}</view>
							</view>
							<view class="line">
								<view class="ll">填表教师</view>
								<view class="lr">{{info.teacherName || ''}}</view>
							</view>
							<view class="line">
								<view class="ll">时间</view>
								<view class="lr">{{info.createTimeFormat}}</view>
							</view>
						</view>
					</view>

					<view class="wbox" v-if="warnResult&&warnResult.length>0">
						<view class="tit">
							测评量表结果
						</view>
						<view class="table">
							<view class="tbody">
								<view class="tr th">
									<view class="td td-2">
										量表
									</view>
									<view class="td td1">
										测评结果
									</view>
									<view class="td td-2">
										时间
									</view>
								</view>
								<view class="tr" v-for="(td,index) in warnResult" :key="index">
									<view class="td td-2">
										{{td.questionName}}
									</view>
									<view class="td td1" :style="'color:'+stageOption(td.stage).color">
										{{td.dimensionLevel}}
									</view>
									<view class="td td-2">
										{{td.operateTime}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="wbox" v-if="testResult&&testOptions.length>0">
						<view class="tit">
							危机评估
						</view>
						<view class="pinguTest">
							<view class="pitem" v-for="(i,index) in testOptions" :key="index">
								<view class="ptit" slot="title">
									<view class="tl">
										<text>{{i.name}}</text>
									</view>
									<view class="tr">
										<view class="ico">
											<image src="@/static/images/icon-more.svg" mode="aspectFit"></image>
										</view>
									</view>
								</view>
								<view class="ul">
									<view class="li" v-for="(j,jindex) in i.topicList" :key="jindex">
										<view class="lt" v-if="j.name">
											<text>题目{{chineseNumber[jindex]}}、</text>
											<text>{{j.name}}</text>
										</view>
										<view class="ops" :class="j.isGrid?'grid':''">
											<template v-if="j.type==1">
												<view class="op" :class="j.value==op.value?'selected':''"
													v-for="(op,oindex) in j.optContent"
													@click="toSelect1(index,jindex,op)">

													<text>{{enLetters[oindex]}}.</text>
													<text>{{op.name}}</text>
												</view>
											</template>
											<template v-if="j.type==2">
												<view class="op" :class="j.value.indexOf(op.value)!=-1?'selected':''"
													v-for="(op,oindex) in j.optContent"
													@click="toSelect2(index,jindex,oindex)">

													<text>{{op.name}}</text>
												</view>
											</template>
											<!-- <view class="op" 
											v-if="j.otherOption"
											:class="testResult[index][jindex].isOtherSelect?'selected':''"
											@tap="testResult[index][jindex].isOtherSelect=!testResult[index][jindex].isOtherSelect"
											>
									`
											</view> -->
										</view>
										<!-- <view class="otherInput" v-if="j.otherOption&&testResult[index][jindex].isOtherSelect">
											<input type="text" :placeholder="'选择'+j.otherOption+'则需要填写描述'" v-model="testResult[index][jindex].otherContent" />
										</view> -->
									</view>
								</view>
							</view>
						</view>

					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemid: '',
				info: {},
				testOptions: [],
				warnResult: [],
				testResult: []
			}
		},
		methods: {
			getInfo() {
				this.$api.riskrecordDetail({
					id: this.itemid
				}, res => {
					if (res.code == 200) {
						this.info = res.data
						this.testOptions = JSON.parse(res.data.questionDataList)
						this.warnResult = JSON.parse(res.data.warnResult)

						let answer = JSON.parse(res.data.answer)

						this.testOptions.some(topic => {
							topic.topicList.some(item => {

								item.optContent = JSON.parse(item.optContent)
								this.$set(item, 'value', '')

								answer.some(item2 => {
									if (item2.id == item.id) {
										item.value = item2.answer
									}
								})
							})
						})
						console.log(this.testOptions, 1212)

					}
				})
			},
			getResult() {
				var that = this;
				var res = [
					[{
						'selected': [0],
						'isOtherSelect': false,
						'otherContent': ''
					}, {
						'selected': [1],
						'isOtherSelect': false,
						'otherContent': ''
					}],
					[{
						'selected': [0],
						'isOtherSelect': false,
						'otherContent': ''
					}, {
						'selected': [1],
						'isOtherSelect': false,
						'otherContent': ''
					}],
					[{
						'selected': [0],
						'isOtherSelect': false,
						'otherContent': ''
					}, {
						'selected': [1],
						'isOtherSelect': false,
						'otherContent': ''
					}],
					[{
						'selected': [2],
						'isOtherSelect': false,
						'otherContent': ''
					}],
					[{
						'selected': [2],
						'isOtherSelect': false,
						'otherContent': ''
					}],
					[{
						'selected': [0, 6],
						'isOtherSelect': true,
						'otherContent': '风险描述内容'
					}],
					[{
						'selected': [2, 6, 8, 9],
						'isOtherSelect': true,
						'otherContent': '昨天就有轻生发生'
					}]
				];
				that.testResult = res;
			},
			getTest() { //获取题目
				var that = this;
				var res = [{
						title: '自杀风险评估',
						children: [{
								title: '目前自杀计划',
								require: true,
								type: 0, //0单选,1多选
								isGrid: false,
								options: ['无计划 ', '有计划，致死性低或可执行性差', '有计划，致死性高或可执行性高', '有计划，致死性高且可执行性高']
							},
							{
								title: '既往自杀计划',
								require: true,
								type: 0, //0单选,1多选
								isGrid: false,
								options: ['无', '曾经有自杀经历，但最近一年没有', '最近一年有自杀经历', '最近一年有多次自杀经历']
							}
						]
					},
					{
						title: '自伤风险评估',
						children: [{
								title: '目前自伤计划',
								require: true,
								type: 0, //0单选,1多选
								isGrid: false,
								options: ['无计划', '有计划，致伤性低或可执行性差', '有计划，致伤性高或可执行性高', '有计划，致伤性高且可执行性高']
							},
							{
								title: '既往自伤计划',
								require: true,
								type: 0, //0单选,1多选
								isGrid: false,
								options: ['无', '曾经有自杀经历，但最近一年没有', '最近一年有自杀经历', '最近一年有多次自杀经历']
							}
						]
					},
					{
						title: '攻击风险评估',
						children: [{
								title: '当前攻击性',
								require: true,
								type: 0, //0单选,1多选
								isGrid: false,
								options: ['无计划', '有计划，致伤性低或可执行性差', '有计划，致伤性高或可执行性高', '有计划，致伤性高且可执行性高']
							},
							{
								title: '既往攻击性',
								require: true,
								type: 0, //0单选,1多选
								isGrid: false,
								options: ['无', '曾经有自杀经历，但最近一年没有', '最近一年有自杀经历', '最近一年有多次自杀经历']
							}
						]
					},
					{
						title: '压力应对',
						children: [{
							require: true,
							type: 0, //0单选,1多选
							isGrid: false,
							options: ['没有现实压力', '有一些现实压力，但能应对', '现实压力较大，但能应对', '现实压力过大，无法应对']
						}]
					},
					{
						title: '支持系统',
						children: [{
							require: true,
							type: 0, //0单选,1多选
							isGrid: false,
							options: ['社会支持系统丰富，与父母关系融洽，有亲密的朋友', '有社会支持，但较难获得帮助', '与父母关系差，没有亲密朋友或朋友数量极少']
						}]
					},
					{
						title: '临床评估',
						children: [{
							require: false,
							type: 1, //0单选,1多选
							isGrid: true,
							otherOption: '其他风险事件',
							options: ['自杀', '自伤', '攻击他人', '校园霸凌', '性侵犯', '学业危机', '家庭冲突', '犯罪相关', '离家/离校出走',
								'危险性行为'
							]
						}]
					},
					{
						title: '异常表现评估',
						children: [{
							require: true,
							type: 1, //0单选,1多选
							isGrid: false,
							otherOption: '其他事件',
							options: [
								'经常无故请假(如请假超过一周又无可信的请假 缘由)',
								'原生家庭解体(父母分居、离异或去世等)',
								'情绪容易暴躁、发怒、易激惹',
								'情绪长期低落压抑，有强烈焦虑、恐慌、紧张，或罪恶感和自责情绪明显',
								'曾经有过较严重的打架斗殴、伤害他人的行为',
								'性格极度内，孤僻缺少朋友，同伴关系淡漠',
								'亲子关系恶劣或冷漠，经常发生亲子冲突，社会支持系统长期缺乏或丧失',
								'经常会出现无缘由的、较严重的睡眠问题',
								'幼年经历过较为严重的创伤(如受家暴、性侵)或有长期寄养经历',
								'近期存在诸如家庭变故、学业受挫、人际冲突、躯体疾病等重大应激事件',
								'情绪突然明显异常，如特别烦躁、焦虑，无法 控制冲动，情绪异常低落或突然从低落变为平静',
								'近来，突然对宗教、哲学、死亡话题产生浓厚 兴趣',
								'突然避开同学、老师或亲人;拒绝和人沟通，做 出抽烟、酗酒等反常的事',
								'不明原因突然向同学、朋友或家人赠送礼物、请客、赔礼道歉、述说告别的话语等，行为明 显改变',
								'正在接受心理治疗的学生(如患有抑郁症、恐怖症、强迫症、焦虑症等)或患有精神分裂症 并已经确诊的学生'
							]
						}]
					}
				];
				that.testOptions = res;
			}
		},
		watch: {
			itemid: function() {
				this.getInfo();
				this.getResult();
				this.getTest();
			}
		},
		onLoad(e) {
			this.itemid = e.id
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.wbox {
		padding: 40rpx;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 30rpx;
		position: relative;
		z-index: 10;

		.bg {
			position: absolute;
			z-index: -1;
			right: 0;
			bottom: 0;
			width: 290rpx;

			image {
				display: block;
				width: 100%;
				height: auto;
			}
		}

		&:last-child {
			margin-bottom: 0;
		}

		.btns {
			margin-top: 80rpx;
			margin-bottom: 20rpx;

			.btn {
				text-align: center;
				font-size: 28rpx;
				color: #fff;
				background: #fe9c29;
				line-height: 90rpx;
				border-radius: 90rpx;
			}
		}

		.tit {
			font-size: 32rpx;
			padding-bottom: 30rpx;
			color: #4d5765;

			&.border {
				border-bottom: 1rpx solid #f4f6f8;
			}
		}

		.lines {
			padding: 20rpx 0 0;

			.line {
				display: flex;
				padding: 10rpx 0;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;

				.ll {
					flex: 0 0 auto;
					color: #7c838d;
				}

				.lr {
					flex: 1 1 auto;
					padding-left: 30rpx;
					text-align: right;
					overflow: hidden;
					color: #4d5765;
				}
			}
		}

		.table {
			.td1 {
				padding: 20rpx 10rpx;
				width: 20%;
			}

			.td-2 {
				width: 40%;
				padding: 20rpx 10rpx;
			}
		}

		.pinguTest {
			.pitem {
				padding: 30rpx 20rpx;
				background: #e5f1ff;
				margin-bottom: 30rpx;
				border-radius: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.li {
					padding: 36rpx 30rpx;
					background: #fff;
					margin-bottom: 10rpx;
					border-radius: 30rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.lt {
						padding-bottom: 30rpx;
						font-size: 28rpx;
						color: #4d5765;
						line-height: 1.2;
					}

					.ops {
						.op {
							max-width: 100%;
							box-sizing: border-box;
							padding: 20rpx 30rpx;
							background: #f4f6f9;
							border-radius: 10rpx;
							font-size: 24rpx;
							color: #4d5765;
							margin-bottom: 8rpx;

							&:last-child {
								margin-bottom: 0;
							}

							&.selected {
								background: #ffefdd;
								color: #fe9c29;
							}
						}

						&.grid {
							display: flex;
							flex-wrap: wrap;
							margin-right: -8rpx;

							.op {
								flex: 1 0 auto;
								padding: 20rpx;
								text-align: center;
								margin-right: 8rpx;
							}
						}
					}

					.otherInput {
						margin-top: 30rpx;

						input {
							width: 100%;
							box-sizing: border-box;
							padding: 0 30rpx;
							height: 90rpx;
							line-height: 90rpx;
							font-size: 24rpx;
							color: #4d5765;
							border: none;
							outline: none;
							background: #f4f6f9;
							border-radius: 90rpx;
						}
					}
				}

				.ptit {
					display: flex;
					align-items: center;
					line-height: 1;
					font-size: 28rpx;
					color: #4d5765;
					padding: 0 30rpx 30rpx;

					.tl {
						flex: 1 1 auto;
						overflow: hidden;
						padding-right: 30rpx;
						display: flex;
						align-items: center;
						justify-content: flex-start;
					}

					.tr {
						flex: 0 0 auto;

						.ico {
							transform: rotate(90deg);

							image {
								display: block;
								width: 12rpx;
								height: 24rpx;
							}
						}
					}
				}
			}
		}

		.cvscontainer {
			padding-bottom: 50%;
			position: relative;
			overflow: hidden;
			pointer-events: none;

			.line {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				overflow: hidden;

				&:after {
					content: "";
					display: block;
					width: 100%;
					padding-bottom: 100%;
				}

				.dot1 {
					position: absolute;
					left: 30rpx;
					bottom: 50%;
					width: 10rpx;
					height: 10rpx;
					background: #fb9b36;
					border-radius: 50%;
					margin-bottom: 5rpx;
				}

				.dot2 {
					position: absolute;
					right: 30rpx;
					bottom: 50%;
					width: 10rpx;
					height: 10rpx;
					background: #e1ebf8;
					border-radius: 50%;
					margin-bottom: 5rpx;
				}

				.i1 {
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: calc(50% + 10rpx);
					overflow: hidden;

					.cr {
						position: absolute;
						left: 30rpx;
						top: 30rpx;
						right: 30rpx;
						transform: rotate(-136deg);

						&:after {
							content: "";
							position: absolute;
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							border-left: 10rpx solid #fb9b36;
							border-top: 10rpx solid #fb9b36;
							border-right: 10rpx solid #e1ebf8;
							border-bottom: 10rpx solid #e1ebf8;
							border-radius: 50%;
							box-sizing: border-box;
						}

						&:before {
							content: "";
							display: block;
							padding-bottom: 100%;
						}
					}

				}

				&.line2 {
					left: 20rpx;
					right: 20rpx;
					top: 20rpx;
					position: absolute;
					z-index: 5;

					.dot1 {
						background: #679bd9;
					}

					.i1 {
						.cr:after {
							border-left: 10rpx solid #679bd9;
							border-top: 10rpx solid #679bd9;
						}
					}
				}
			}
		}

		.map {
			position: relative;
			z-index: 5;
			padding-bottom: 50rpx;
			margin-bottom: 40rpx;

			&.nomap {
				padding-bottom: 0;

				.hd {
					position: static;
					left: 0;
					right: 0;

					.score,
					.tag {
						display: none;
					}
				}
			}

			.hd {
				position: absolute;
				left: 60rpx;
				right: 60rpx;
				bottom: 0;
				text-align: center;
				color: #4d5765;

				.score {
					font-size: 24rpx;

					line-height: 1;
					margin-bottom: 20rpx;

					.num {
						font-size: 64rpx;
					}
				}

				.name {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.p {
					padding: 10rpx 20rpx 30rpx;
					font-size: 24rpx;
					color: #7e8998;
				}

				.tag {
					display: inline-block;
					line-height: 40rpx;
					font-size: 24rpx;
					color: #fe9c29;
					background: #ffebd4;
					border-radius: 4rpx;
					padding: 0 12rpx;
				}
			}
		}
	}
</style>